<template>
  <el-row class="container">
    <el-col :span="24">
      <h2>App版本设置</h2>
      <el-form :model="form" ref="form">
        <el-table
          border
          :data="listData">
          <el-table-column
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)" v-if="form.id !== scope.row.id">编辑
              </el-button>
              <el-button
                size="mini"
                @click="handleCancel" v-if="form.id === scope.row.id">取消
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="submitEdit('form')" v-if="form.id === scope.row.id">保存
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="platform"
            label="类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="version"
            label="版本号"
            align="center">
            <template slot-scope="scope">
              <el-form-item label="" :label-width="formLabelWidth" prop="version" :rules="rules.version" v-if="form.id===scope.row.id">
                <el-input v-model="form.version" auto-complete="off"  size="mini" clearable></el-input>
              </el-form-item>
              <div v-else>{{scope.row.version}}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="500"
            prop="url"
            label="外部下载链接"
            align="center">
            <template slot-scope="scope">
              <el-form-item label="" :label-width="formLabelWidth" prop="url" :rules="rules.url" v-if="form.id===scope.row.id">
                <el-input v-model="form.url" auto-complete="off" placeholder="请输入url" size="mini" clearable></el-input>
              </el-form-item>
              <div v-else>{{scope.row.url}}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="500"
            prop="urlPrivate"
            label="内部下载链接"
            align="center">
            <template slot-scope="scope">
              <el-form-item label="" :label-width="formLabelWidth" prop="urlPrivate" :rules="rules.url" v-if="form.id===scope.row.id">
                <el-input v-model="form.urlPrivate" auto-complete="off" placeholder="请输入url" size="mini" clearable></el-input>
              </el-form-item>
              <div v-else>{{scope.row.urlPrivate}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="forcedFlag"
            label="更新类型"
            align="center">
            <template slot-scope="scope">
              <el-form-item label="" :label-width="formLabelWidth" prop="forcedFlag"  v-if="form.id===scope.row.id">
                <el-select v-model="form.forcedFlag"  size="mini" >
                  <el-option label="不强制" :value="0"></el-option>
                  <el-option label="强制" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <div v-else>{{scope.row.forcedFlag===0?'不强制':'强制'}}</div>
            </template>
          </el-table-column>
          <!--<el-table-column-->
          <!--prop="version"-->
          <!--label="版本号"-->
          <!--align="center">-->
          <!--</el-table-column>-->
        </el-table>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import ValidataRules from '@/utils/validateRules'

  export default {
    components:{
    },
    data(){
      return {
        listData:[],
        formLabelWidth:'0px',
        rules:{
          url: [
            {required:true,trigger:'blur',message:'不能为空'},
            {type:'url',trigger:'blur',message:'输入不合法'},
            { validator: ValidataRules.limitMaxLength(200), trigger:'blur'}
          ],
          version: [
            {required:true,trigger:'blur',message:'不能为空'},
            { validator: ValidataRules.versionTest(), trigger:'blur'},
            { validator: ValidataRules.limitMaxLength(20), trigger:'blur'}
          ]
        },
        form:{
          forcedFlag: null,
          id: null,
          url: "",
          urlPrivate: "",
          version: ""
        }
      }
    },
    methods:{
      initData(){
        ApiClient.get('/backend/version/list.do').then(data => {
          // console.log(data)
          this.listData = data;
        })
      },
      handleEdit(obj){
        // console.log(obj)
        this.form.forcedFlag = obj.forcedFlag;
        this.form.id = obj.id;
        this.form.url = obj.url;
        this.form.urlPrivate = obj.urlPrivate;
        this.form.version = obj.version;
      },
      handleCancel(){
        this.form=Object.assign({},{id:null,forcedFlag:null,url:'',urlPrivate:'',version:''})
      },
      submitEdit(form){
        this.$refs[form].validate((valid)=>{
          if(valid){
            ApiClient.put('/backend/version/update.do',this.form).then(data=>{
              this.form=Object.assign({},{id:null,forcedFlag:null,url:'',urlPrivate:'',version:''})
              this.initData()
            })
          }
        })
      }
    },
    mounted(){
      this.initData();
    }
  }
</script>
<style lang="scss">
  .container{
    h2{
      margin-bottom: 20px;
    }
    td{
      .el-button + .el-button {
        margin-top: 4px;
        margin-left: 0;
      }
    }
  }
</style>
